<template>
  <transition name="slide">
    <div class="list">
      <van-nav-bar title="校内电话" leftText="返回" rightText="1" leftArrow @click-left="onClickLeft" @click-right="onClickRight" />
      <!-- <div class="scroll-wrapper" :ref="scroll-wrapper">
        <cube-scroll ref="scroll" :data="items" :options="options" @pulling-up="onPullingUp" @pulling-down="onPullingDown"></cube-scroll>
      </div> -->
        <form action="/">
          <van-search class="searchbar"
            v-model="value"
            placeholder="请输入要查询的电话"
            show-action
            @search="onSearch"
            @cancel="onCancel"
          />
        </form>

        <van-tabs :active="active" swipeable>
          <van-tab  v-for="(items,index) in numSort" :title="items.title" :key="index">
            <van-cell-group class="vancell">
              <van-cell v-for="(item,index1) in items.directory" :title="item.title" value=""  :label="item.label" :key="(index,index1)" @click="getCall(index,index1)"/>
              <!-- <van-cell title="单元格" value="" label="描述信息" /> -->
              <a :href="'tel:'+callNum" id="callNum"></a>
            </van-cell-group>
          </van-tab>
        </van-tabs>
      <router-view></router-view>
    </div>
  </transition>
</template>
<script>
import Vue from "vue";
import { Search } from "vant";
import { Tab, Tabs } from "vant";
import { Cell, CellGroup } from "vant";
import { Dialog } from 'vant';

Vue.use(Cell).use(CellGroup);
Vue.use(Tab).use(Tabs);
Vue.use(Search);

export default {
  data() {
    return {
      active: 0,
      value: "",
      callNum:'',
      numSort: [
        {
          title: "新校区",
          directory: [
            {
              title: "总值班室(南校区)",
              label: "029-81891818"
            },
            {
              title: "家属区立远物业管理(南校区)",
              label: "029-81892811"
            },
            {
              title: "家属区立远物业维修(南校区)",
              label: "029-81892812"
            },
            {
              title: "报警中心(南校区)",
              label: "029-81891110"
            },
            {
              title: "火警中心(南校区)",
              label: "029-81891119"
            },
            {
              title: "兴隆派出所(南校区)",
              label: "029-85849110"
            },
            {
              title: "医院急诊(南校区)",
              label: "029-81891203"
            },
            {
              title: "网络服务(南校区)",
              label: "029-81891357"
            },
            {
              title: "能源收费(南校区)",
              label: "029-81891136"
            },
            {
              title: "水维修(南校区)",
              label: "029-81891015"
            },
            {
              title: "学生电视维修(南校区)",
              label: "029-81891197"
            },
            {
              title: "一卡通中心(南校区)",
              label: "029-81891135"
            }
          ]
        },
        {
          title: "老校区",
          directory: [
            {
              title: "总值班室(北校区)",
              label: "029-88202212"
            },
            {
              title: "报警中心(北校区)",
              label: "029-88201110"
            },
            {
              title: "火警中心(北校区)",
              label: "029-88201119"
            },
            {
              title: "白沙路派出所(北校区)",
              label: "029-86755430"
            },
            {
              title: "后勤一站式服务(北校区)",
              label: "029-88201000"
            },
            {
              title: "电话号码查询(北校区)",
              label: "029-88201114"
            },
            {
              title: "医院急诊(北校区)",
              label: "029-88202779"
            },
            {
              title: "家委会（物业）(北校区)",
              label: "029-88202407"
            },
            {
              title: "网络服务(北校区)",
              label: "029-88201252"
            },
            {
              title: "能源收费(北校区)",
              label: "029-88204726"
            },
            {
              title: "水维修(北校区)",
              label: "029-88202768"
            },
            {
              title: "暖气地热维修(北校区)",
              label: "029-88201344"
            },
            {
              title: "天然气(北校区)",
              label: "029-88202780"
            },
            {
              title: "电维修(北校区)",
              label: "029-88201224"
            },
            {
              title: "有线电视维修(北校区)",
              label: "029-88202314"
            },
            {
              title: "一卡通中心(北校区)",
              label: "029-88204626"
            }
          ]
        },
        {
          title: "其他",
          directory: [
            {
              title: "总值班室(北校区)",
              label: "029-88202212"
            },
            {
              title: "报警中心(北校区)",
              label: "029-88201110"
            },
            {
              title: "火警中心(北校区)",
              label: "029-88201119"
            },
            {
              title: "白沙路派出所(北校区)",
              label: "029-86755430"
            },
            {
              title: "后勤一站式服务(北校区)",
              label: "029-88201000"
            }
          ]
        }
      ]
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      this.$router.push("/list/mint-pull");
    },
    onSearch() {},
    onCancel() {},
    getCall (index,index1){
      console.log(1)
      Dialog.confirm({
        title: '确认拨打此电话？',
        message: this.numSort[index].directory[index1].label
      }).then(() => {
        this.callNum = this.numSort[index].directory[index1].label
        setTimeout(() => {
          let a = document.getElementById('callNum')
           a.click()
        }, 1000);       
      }).catch(() => {
        // on cancel
         console.log(0)
      });
    }
  }
};
</script>

<style lang="less">
@import "../../assets/less/baseDetail.less";
// .content {
//   width: 100%;
//   overflow: auto;
// }
// .list {
//   overflow: scroll;
// }
.van-tabs {
  height: calc(~"100% - 88px");
}
.van-cell {
  height: 70px;
  font-size: 16px;
  padding-left: 25px;
}
// .vancell{
//   height: calc(~'100% -132px');
//   overflow: scroll;
// }
.van-tabs__content{
  // height: 500px;
  height: calc(~'100%');
  overflow: scroll;
}
</style>

